<template>
  <z-publicFrame>
    <template v-slot:header>
      <el-button-group class="buttong">
        <el-button @click.native="handleAdd" type="primary" icon="el-icon-plus">添加</el-button>
        <el-button @click.native="handleDel" type="danger" icon="el-icon-delete">删除</el-button>
      </el-button-group>
    </template>
    <template v-slot:container>

      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          width="55">
        </el-table-column>

          <el-table-column
          fixed
          prop="date"
          label="日期"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          >
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          >
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          >
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="primary" icon="el-icon-edit"
                size="mini"
              ></el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="danger" icon="el-icon-delete"
                size="mini"
              ></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </z-publicFrame>
</template>

<script>
import PublicFrame from '../../components/CrudTempalte/PublicFrame'
export default {
  name: 'List',
  components: {
    'z-publicFrame': PublicFrame
  },
  props: ['menus'],
  methods: {
    handleClick(row) {
      console.log(row)
    },
    handleSelectionChange(v) {
      console.log(v)
    },
    handleAdd() {
      const hashs = document.location.hash.split('/')
      hashs[hashs.length - 1] = 'add'
      hashs[0] = ''
      const path = hashs.join('/')
      this.$router.push(path)
    },
    handleDel() {

    }

  },

  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄 ',
        zip: 200333
      }]
    }
  },
  mounted() {
  },
  created() {

  }
}
</script>

<style lang="less" scoped>
  .container{
    height: 100%;
    margin-left: 40px;
    .el-table {
      margin-top: 30px;
    }
  }
  .buttong {
    margin: 10px 0;
  }
</style>
